<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
    </head>
    <body>
        <div id="app">


            <h2>{{err}}</h2>
            <form action="#" method="post">
                用户名： <input type="text" v-model="username"><br>
                密码： <input type="password" v-model="pass"><br>
                <input type="button" value="登录" @click="login()">
            </form>

        </div>

        <script src="js/vue.js"></script>
        <script src="js/axios-0.18.0.js"></script>
        <!-- html 引入Javascript -->
        <script>
            // javascript
            //Vue 就是一个Javascript 的库
            //1. 创建Vue核心对象

            new Vue({
                el: "#app",
                // data 是定义vue变量的地方
                data() {
                    return {
                        username: "",
                        pass: "",
                        err: ""
                    }
                },
                methods: {
                    login: function () {
                        var _this = this;

                        //调用axios发送请求
                        axios({
                            method: "post",
                            url: "http://localhost:8080/brand-case/login",
                            data: {
                                uname: _this.username,
                                pwd: _this.pass
                            }
                        }).then(function (resp) {
                            //接收请求的返回值   resp代表的是响应对象  ，由axios框架来创建，填充数据到data属性上
                            //传递给Vue变量
                            console.log(resp.data)
                            let s = JSON.stringify(resp.data);
                            // console("resp: " + resp.data)
                            let parse = JSON.parse(s);
                            console.log("code: " + parse.code)
                            if (parse.code == 200) {
                                //登录成功
                                console.log("userType: "+parse.data.userType)
                                let userInfo = parse.data;
                                // 前端存储本地
                                localStorage.setItem("token", userInfo.token)
                                localStorage.setItem("userType", userInfo.userType)
                                // 页面跳转
                                window.location.href = "brand.html";
                            } else {
                                _this.err = "登录失败"
                            }

                        })
                    }
                }
            });

        </script>
    </body>
</html>